<template>
    <h2>使用间距尺寸</h2>
    <div class="tw:flex tw:flex-row tw:rounded tw:gap-4">
        <div class="tw:basis-64 tw:bg-purple-400 tw:flex tw:justify-center tw:items-center tw:h-10 tw:rounded">01</div>
        <div class="tw:basis-64 tw:bg-purple-400 tw:flex tw:justify-center tw:items-center tw:rounded">02</div>
        <div class="tw:basis-128 tw:bg-purple-400 tw:flex tw:justify-center tw:items-center tw:rounded">03</div>
    </div>
    <h2>使用容器刻度</h2>
    <div class="tw:flex tw:flex-row tw:gap-4">
        <div class="tw:basis-3xs tw:bg-[#0da5ee] tw:h-8 tw:rounded-md tw:flex tw:justify-center tw:items-center">01</div>
        <div class="tw:basis-2xs tw:bg-[#0da5ee] tw:h-8 tw:rounded-md tw:flex tw:justify-center tw:items-center">02</div>
        <div class="tw:basis-xs tw:bg-[#0da5ee] tw:h-8 tw:rounded-md tw:flex tw:justify-center tw:items-center">03</div>
        <div class="tw:basis-sm tw:bg-[#0da5ee] tw:h-8 tw:rounded-md tw:flex tw:justify-center tw:items-center">04</div>
    </div>
    <h2>使用分数</h2>
    <div class="tw:flex tw:gap-1 tw:flex-row">
        <div class="tw:basis-1/3 tw:rounded-md tw:bg-[#5b67f8] tw:h-8 tw:flex tw:justify-center tw:items-center">01</div>
        <div class="tw:basis-2/3 tw:rounded-md tw:bg-[#5b67f8] tw:h-8 tw:flex tw:justify-center tw:items-center">01</div>
    </div>
</template>